<template>
	
  <el-dialog
    v-if="show"
    v-model="dialog"
    title="订单详情"
    class="OrderDetailDialog"
    width="75%"
    :close-on-click-modal="false"
    :before-close="handleClose"
    top="4vh"
  >
    <el-row>
      <el-col :span="16">
        <div class="my_card">
          <div class="header">订单基本信息</div>
          <el-row class="elrow">
            <el-col :span="8">
              <div class="title">订单编号</div>
              <span style="word-wrap: break-word">{{ detail.orderNo }}</span>
            </el-col>
            <el-col :span="8">
              <div class="title">订单类型</div>
              <span>{{ chargeTimeTypeNum(detail.chargeTimeType) }}</span>
            </el-col>
            <el-col :span="8">
              <div class="title">下单时间</div>
              <span>{{ detail.createTime }}</span>
            </el-col>
            <el-col :span="8">
              <div class="title">订单状态</div>
              <span>{{ statusCn(detail.status) }}</span>
            </el-col>
            <el-col :span="8">
              <div class="title">订单取消时间</div>
              <span>{{ detail.cancelTime || '无'  }}</span>
            </el-col>
            <el-col :span="8">
              <div class="title">取消原因</div>
              <span>{{ ((detail.workerCancelReason || '') + (detail.userCancelReason || ''))  || '无'}}</span><br>
              详情:<br>
<!--              <span>{{ ((userCancelList(detail.userCancelId) || '') + ((workerCancelList(detail.workerCancelId)) || '')) || '无' }}</span><br>-->
              <span>{{ ((detail.workerCancelReasonDetail) || '') + ((detail.userCancelReasonDetail) || '') || '无' }}</span><br>
            </el-col>
          </el-row>
        </div>
        <div class="my_card">
          <div class="header">订单服务基础信息 - 1</div>
          <el-row class="elrow">
            <el-col :span="6">
              <div class="title">用户姓名</div>
              <span>{{ detail.userName }}</span>
            </el-col>
<!--            <el-col :span="6">-->
<!--              <div class="title">UID</div>-->
<!--              <span>{{ detail.userId || '无' }}</span>-->
<!--            </el-col>-->
            <el-col :span="6">
              <div class="title">用户联系方式</div>
              <span>{{ detail.phone }}</span>
            </el-col>
            <el-col :span="6">
              <div class="title">用户车牌</div>
              <span>{{ detail.vehicleNo }}</span>
            </el-col>
          </el-row>
          <el-row class="elrow">
            <el-col :span="6">
              <div class="title">司机姓名</div>
               <span>{{detail.workerName}}</span>
            </el-col>

<!--            <el-col :span="6">-->
<!--              <div class="title">UID</div>-->
<!--               <span>{{detail.workerId}}</span>-->
<!--            </el-col>-->
            <el-col :span="6">
              <div class="title">司机联系方式</div>
               <span>{{detailDriver.mobileNo}}</span>
            </el-col>
            <el-col :span="6">
              <div class="title">司机车牌</div>
              {{detailDriver.vehicleNo}}
            </el-col>
          </el-row>
        </div>
        <div class="my_card">
          <div class="header">订单服务基础信息 - 2</div>
          <el-row class="elrow flexBox">
            <el-col :span="24" class="flexBox">
              <div class="flexBox">
                <el-icon color="#179A72"><Location /></el-icon> 订单地址
              </div>
              <p>--------------------------</p>
              <div>
                <p>{{ detail.address }}</p>
                <p class="remark">{{ detail.addressDetail }}</p>
              </div>
            </el-col>
            <el-col :span="24" class="flexBox">
              <div class="flexBox">
                <el-icon color="#179A72"><Van /></el-icon> 车辆信息
              </div>
              <p>--------------------------</p>
              <div>
                <p>{{ detail.vehicleNo }}</p>
                <p class="remark">{{ detail.vehicleType + ' ' + detail.vehicleColor }}</p>
              </div>
            </el-col>
            <el-col :span="24" class="flexBox">
              <div class="flexBox">
                <el-icon color="#179A72"><InfoFilled /></el-icon> 备注信息
              </div>
              <p>--------------------------</p>
              <div>暂无备注信息</div>
            </el-col>
          </el-row>
        </div>

        <div class="my_card">
          <div class="header">订单费用信息</div>
          <el-row class="elrow">
            <div class="flexBetween">
              <p>
                <span class="leftTitle">充电单价</span> ------------------- ￥{{
                  detail.price || '0.00'
                }}
              </p>
              <p>停车费用 ------------------- <span class="price">￥0.00</span></p>
            </div>
            <div class="flexBetween">
              <p>
                <span class="leftTitle">总充电度数</span> -------------------
                {{ detail.powerCharge }}
              </p>
              <p>
                高速收费 -------------------
                <span class="price">￥{{ detail.gsglFee || '0.00' }}</span>
              </p>
            </div>

            <div class="flexBetween">
              <p><span class="leftTitle">充电时长</span> ------------------- {{ '0' }}分钟</p>
              <p>
                配电运送费 ------------------- <span class="price">￥{{ detail.pdysFee }}</span>
              </p>
            </div>
          </el-row>
          <el-row class="elrow flexBetween fontBold">
            <div>费用合计</div>
            <div>￥{{ detail.endMoney || '0.00' }}</div>
          </el-row>
        </div>

        <div class="my_card">
          <div class="header">订单支付信息</div>
          <el-row class="elrow flexBetween">
            <p>优惠折扣 ------------------- ￥{{ detail.reduceMoney || '0.00' }}</p>
            <p>支付方式 ------------------- 微信支付</p>
          </el-row>
          <el-row class="elrow flexBetween fontBold">
            <div>实际支付</div>
            <div>￥{{ detail.payMoney || '0.00' }}</div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8" style="padding-left: 40px">
        <div class="my_card">
          <div class="header">订单服务时间线</div>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              color="#0bbd87"
              type="success"
              size="large"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="my_card">
          <div class="header">服务设备信息</div>
          <div class=" equipmentBox">
            <div >
              <p>{{ detail.bmsNo }}</p>
              <p>正常使用中</p>
            </div>
            <div class="alignCenter" style="cursor: pointer;">
              <span>查看设备详情</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, watch, withDefaults } from 'vue'
import {getUserinfoById} from "@/api/apis/userManageApi";
import api from '@/api/apis/orderApi'

//详情数据
const detailDriver = ref({
	mobileNo:'',
	vehicleNo:''
})
onMounted(()=>{
  // getDetailDriverApi()

})
const props = withDefaults(defineProps<Props>(), {
  show: false,
  // detailId:'',
  detail: {},

})

watch(
  () => props.detail,
  (val, prevVal) => {
	console.log('66666666666',val.workerId)
    getDetailDriverApi(val.workerId)
  },
  // {immediate:true}
)


//获取详情
const getDetailDriverApi = async (id) => {
  let { data } = await api.getDetailDriverById(id)//////////////////////
  if (data.code == 200) {
    detailDriver.value = data.data
  }
}



interface Props {
  show: boolean
  detail: any
}
const dialog = ref(true)

// withDefaults(defineProps<Props>(), {
//   show: false,
//   detail: {},
// })
const emit = defineEmits<{
  (event: 'update:show', val: boolean): void
}>()
//弹框关闭
const handleClose = () => {
  emit('update:show', false)
}

const statusCn = (value: string) => {
  let obj: any = {
    0: '提交订单',
    1: '司机接单',
    2: '充电中',
    3: '充电暂停',
    4: '未支付',
    5: '已支付',
    6: '预约订单',
    7: '司机已抢单',
    8: '司机已取消',
    9: '用户已取消',
  }
  return obj[value]
}

const userCancelList = (value: number) => {
  let obj: any = {
    0: '等待时间过长',
    1: '临时有事，需要离开',
    2: '停车位置司机无法到达',
    3: '其他',
  }
  return obj[value]
}

const workerCancelList = (value: number) => {
  let obj: any = {
    0: '汽车或者设备出现故障',
    1: '客户充电车停车取余处于禁停位置，无法到达',
    2: '其他原因',
  }
  return obj[value]
}

//时间线数据
const activities = reactive([
  {
    content: '该订单已完成',
    timestamp: '18：27',
  },
  {
    content: '司机确认完成充电目标',
    timestamp: '18：26',
  },
  {
    content: '司机确认目标车辆并按订单要求开始充电',
    timestamp: '17：55',
  },
  {
    content: '司机已到达目的地附近开始寻找目标车辆',
    timestamp: '17：30',
  },
  {
    content: '司机已接单，并前往目的地',
    timestamp: '17：20',
  },
  {
    content: '用户发起订单',
    timestamp: '17：10',
  },
])
const chargeTimeTypeNum = (value: string) => {
  let obj: any = {
    '00': '即刻—标准充电',
    '01': '预约—标准充电',
    '02': '即刻—定制充电',
    '03': '预约—定制充电',
  }
  return obj[value]
}
</script>

<style lang="scss">
.OrderDetailDialog {
  .el-dialog__body {
    padding: 0px 20px 10px;
  }
  .el-timeline {
    padding: 20px;
  }
  .equipmentBox{
      padding: 20px 10px;
      margin: 10px;
      align-items: center;
      box-sizing: border-box;
      background-color: #C4F4DA ;
      display: flex;
      justify-content: space-between;
      border-radius: 10px;
      color: #0E7B5C ;
  }
  .alignCenter{
    display: flex;
    align-items: center;
  }
  .my_card {
    border: 1px solid rgba(220, 221, 221, 1);
    border-radius: 10px;
    // padding: 13px 0;
    margin-bottom: 10px;
    .header {
      color: rgba(16, 16, 16, 1);
      font-size: 16px;
      border-bottom: 1px solid rgba(220, 221, 221, 1);
      padding: 10px 24px;
      font-weight: 600;
    }
    .flexBetween {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .leftTitle {
        width: 70px;
        display: inline-block;
      }
    }
    .price {
      display: inline-block;
      width: 30px;
    }
    .fontBold {
      font-weight: bold;
      color: #333;
      font-size: 15px;
    }
    .elrow {
      // text-align: right;
      border-top: 1px solid rgba(220, 221, 221, 1);
      padding: 10px 24px;
      .title {
        font-weight: 600;
        color: #333;
      }

      .flexBox {
        display: flex;
        align-items: center;
        p {
          margin: 0 10px;
        }
        .remark {
          color: #a7a7b3;
        }
        .el-icon {
          margin-right: 5px;
        }
      }
      .el-col {
        margin-bottom: 10px;
      }
    }
    .elrow:nth-child(2) {
      border-top: none !important;
    }
  }
}
</style>
